<template>
<div class="player-full">
  <div class="player-full" v-show="full">
    <div class="down">
      <van-icon name="arrow-down" />
    </div>
    <div class="player-title">
      <h1 class="song-name">幻化成风</h1>
      <h2 class="singer-name">林俊杰</h2>
    </div>
    <img
      class="cd-img"
      src="https://p2.music.126.net/vu3Cdo_dPq8HKOPI6_YXfA==/74766790689775.jpg"
    />
    <div class="player-control">
      <i class="music-icon full-icon">&#xea76;</i>
      <i class="music-icon full-icon">&#xe78a;</i>
      <i class="music-icon full-icon play">&#xe624;</i>
      <i class="music-icon full-icon">&#xe602;</i>
      <i class="music-icon full-icon">&#xea83;</i>
    </div>
  </div>
  <div class="player-mini" v-show="mini">
    <van-cell center>
      <template #title>
        <div class="player-title-mini">
          <img
            src="https://p2.music.126.net/vu3Cdo_dPq8HKOPI6_YXfA==/74766790689775.jpg"
          class="cd-img-mini" 
          />
          <span class="song-name-mini">幻化成风</span>
          <span class="singer-name-mini"> - 林俊杰</span>
        </div>
      </template>
      <template #right-icon>
         <i class="music-icon mini-icon">&#xe624;</i>
         <i class="music-icon mini-icon">&#xea83;</i>
      </template>
    </van-cell>
  </div>
  </div>
</template>

<script>
export default {
    
data(){
    return {
        full: false,
        mini: true,
    };
  },
};
</script>

<style scoped>
.player {
    position: fixed;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 10;
    color: #666;
}

.down{
    position: absolute;
    top: 0;
    left: 6px;
    padding: 0.266667rem;
    z-index: 100;
}

.player-title {
    width: 70%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    text-overflow: hidden;
    white-space: nowrap;
    padding: 0.266667rem;
}

.song-name{
    font-size: 14px;
    padding-bottom: 4px;
}

.singer-name{
    font-size: 12px;
}

.cd-img{
    position: absolute;
    top: 4.266667rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7.306667rem;
    height: 7.306667rem;
    border-radius: 50%;
}

.player-control{
    width: 80%;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 1.333333rem;
    left: 50%;
    transform: translateX(-50%)
}
.player-control,
.full-icon{
    flex: 1;
    font-size: 0.666667rem;
    text-align: center;
}

.player-control,
.play{
    font-size: 1.333333rem;
}

.player-mini{
    display: flex;
    width: 100px;
    height: 1.173333rem;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
}

.player-title-mini{
    display: flex;
    align-items: center;
}

.cd-img-mini{
    width: 1.066667rem;
    height: 1.066667rem;
    border-radius: 50%;
    margin: -10px 10px 0 0;
}

.song-name-mini{
    font-size: 14px;
}

.singer-name-mini {
    font-size: 12px;
    color: #666;
}
.player-mini .mini-icon{
    color: #666;
    font-size: 00.666667rem;
    margin-left: 0.533333rem;
}
</style>